<template>
  <div>
    <el-descriptions :column="3" title="合同信息" border>
      <el-descriptions-item label="甲方单位"
        ><span class="text--info">{{
          contractInfo?.partyA
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="乙方单位"
        ><span class="text--info">{{
          contractInfo?.partyB
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="合同名称"
        ><span class="text--info">{{
          contractInfo?.contractName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="甲方负责人"
        ><span class="text--info">{{
          contractInfo?.directorAName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="乙方负责人"
        ><span class="text--info">{{
          contractInfo?.directorBName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="合同编号"
        ><span class="text--info">{{
          contractInfo?.contractNum
        }}</span></el-descriptions-item
      >

      <el-descriptions-item label="甲方负责人电话"
        ><span class="text--info">{{
          contractInfo?.directorAPhone
        }}</span></el-descriptions-item
      >

      <el-descriptions-item label="乙方负责人电话"
        ><span class="text--info">{{
          contractInfo?.directorBPhone
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="创建时间"
        ><span class="text--info">{{
          contractInfo?.createTime
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="甲方负责人邮件"
        ><span class="text--info">{{
          contractInfo?.directorAEmail
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="乙方负责人邮件"
        ><span class="text--info">{{
          contractInfo?.directorBEmail
        }}</span></el-descriptions-item
      >
    </el-descriptions>
    <br />
    <el-descriptions :column="3" title="项目组信息" border>
      <el-descriptions-item label="甲方专业组长"
        ><span class="text--info">{{
          userObj?.roleCode1
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="甲方副组长"
        ><span class="text--info">{{
          userObj?.roleCode2
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="甲方执行组长"
        ><span class="text--info">{{
          userObj?.roleCode3
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="乙方单位负责人"
        ><span class="text--info">{{
          userObj?.roleCode4
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="监理单位负责人"
        ><span class="text--info">{{
          userObj?.roleCode5
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="甲方单位负责人"
        ><span class="text--info">{{
          userObj?.roleCode6
        }}</span></el-descriptions-item
      >
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, reactive } from "vue";
import { getProTeamMembers } from "/@/api/project";

let userObj = reactive({
  roleCode1: "",
  roleCode2: "",
  roleCode3: "",
  roleCode4: "",
  roleCode5: "",
  roleCode6: ""
});
const props = defineProps({
  contractInfo: {
    type: Object,
    default: () => {}
  }
});

const getInitData = async () => {
  try {
    const params = {
      id: props.contractInfo.id
    };
    const { code, data } = await getProTeamMembers(params);
    if (code === 200) {
      data?.memberTypeList.length &&
        data?.memberTypeList.forEach(item => {
          userObj[`roleCode${item.roleCode}`] = item.userName;
        });
    }
  } catch (err) {
    console.log(err);
  }
};

getInitData();
</script>

<style lang="scss" scoped>
.text--info:empty::before {
  content: "-";
  color: gray;
}
</style>
